<template>
  <div class="addEssay">
    <van-row justify="space-around">
      <van-col span="10">
        <h1>发博文</h1>
      </van-col>
    </van-row>
    <van-cell-group>
      <!-- 标题 -->
      <van-field v-model="heading" label="标题" label-align="left" placeholder="请输入标题"/>
      <!-- 内容 -->
      <van-field
          v-model="content"
          rows="2"
          autosize
          label="内容"
          label-align="left"
          type="textarea"
          placeholder="请输入博文内容"
      />
      <div class="choose">
        <!-- 城市-->
        <van-cell is-link @click="showPopupCity" title="城市" :value="newEssay.city"/>
        <van-popup v-model:show="showCity" position="bottom" :style="{ height: '50%' }">
          <van-area
              :area-list="areaList"
              :columns-num="2"
              title="城市"
              value="areaName"
              @change="areaChange"
              @confirm="areaConfirm"
              @cancel="areaCancel"
          />
        </van-popup>
        <!-- 时间 -->
        <van-cell is-link @click="showPopupMonth" title="时间" :value="month"/>
        <van-popup v-model:show="showMonth" position="bottom" :style="{ height: '50%' }">
          <van-picker
              title="时间"
              :columns="months"
              @confirm="monthConfirm"
              @cancel="monthCancel"
              @change="monthChange"
          />
        </van-popup>
        <!-- 时长 -->
        <van-cell is-link @click="showPopupDays" title="时长" :value="days"/>
        <van-popup v-model:show="showDays" position="bottom" :style="{ height: '50%' }">
          <van-picker
              title="标题"
              :columns="dayNights"
              @confirm="daysConfirm"
              @cancel="daysCancel"
              @change="daysChange"
          />
        </van-popup>
      </div>
    </van-cell-group>
    <!-- 文件上传 -->
<!--    <div class="file">-->
<!--      <van-uploader v-model="fileList" multiple :max-count="2"/>-->
<!--    </div>-->
    <!-- 按钮 -->
<!--    <van-row justify="space-around">-->
<!--      <van-col span="6">-->
<!--        <van-button type="primary" @click="buttonConfirm">确定</van-button>-->
<!--      </van-col>-->
<!--      <van-col span="6">-->
<!--        <van-button type="primary">取消</van-button>-->
<!--      </van-col>-->
<!--    </van-row>-->
  </div>
</template>

<script>
// @ is an alias to /src
import {areaList} from '@vant/area-data';

export default {
  name: "AddEssay",
  props: ["newEssay"],
  data() {
    return {
      heading: "",
      title: "",
      content: "",
      city: "",
      areaName: "",
      showCity: false,
      areaList,
      month: "",
      showMonth: false,
      months: [
        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
      ],
      days: "",
      showDays: false,
      dayNights: [
        // 第一列
        {
          values: ['一天', '二天', '三天', '四天', '五天', '六天', '七天', '八天'],
          defaultIndex: 2,
        },
        // 第二列
        {
          values: ['一夜', '两夜', '三夜', '四夜', '五夜', '六夜', '七夜', '八夜'],
          defaultIndex: 1,
        },
      ],
      // fileList: [
      //   // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
      //   // Uploader 根据文件后缀来判断是否为图片文件
      //   // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      //   // { url: 'https://cloud-image', isImage: true },
      // ],

    };
  },
  methods: {
    // 城市
    showPopupCity() {
      let that = this
      that.showCity = true;
    },
    areaChange() {
    },
    areaConfirm(val) {
      let that = this
      //values的值即为用户选中的省市对象，之后可向后端数据交互
      // console.log(values)
      that.areaName = val[0].name + "/" + val[1].name;
      that.city = that.areaName;
      that.showCity = false;
    },
    areaCancel() {
      let that = this
      that.showCity = false;
      // this.list[3].msg='请选择'
    },
    // 时间
    showPopupMonth() {
      let that = this
      that.showMonth = true;
    },
    monthChange() {
    },
    monthConfirm(value) {
      let that = this
      that.month = value;
      that.showMonth = false;
    },
    monthCancel() {
      let that = this
      that.showMonth = false;
    },
    // 时长
    showPopupDays() {
      let that = this
      that.showDays = true;
    },
    daysChange() {
    },
    daysConfirm(values) {
      let that = this
      that.days = values[0] + values[1];
      that.showDays = false;
    },
    daysCancel() {
      let that = this
      that.showDays = false;
    },
  },
};
</script>

<style scoped>
.addEssay {
  /* 上右下左 */
  padding: 0px 30px 30px 30px;
}

.choose {
  text-align: left;
}

.file {
  padding: 10px;
}
</style>
